<!doctype html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>后台登录-X-admin2.2</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />

        <link rel="stylesheet" href="../css/font.css">
        <link rel="stylesheet" href="../css/xadmin.css">
        <script src="../js/jquery.min.js"></script>
        <script src="../js/echarts.min.js"></script>
        <script src="/myAdmin/lib/layui/layui.js"></script>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body " style="position: relative">
                            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                            <div id="main" style="width: 100%;height:400px;"></div>
                            <div style="position: absolute ; right: -6px ;top: 60px ;">
                                <div class="layui-btn-container">
                                  <button title="表格上传" type="button" id="excelUpload" class="layui-btn layui-btn-primary " style="border: none"><i class="layui-icon" style="font-size: 20px">&#xe681;</i> </button>
                                </div>
                                <a onclick="exports()" title="导出到表格" href="javascript:;" style="position: absolute ; right: 22px "><i class="layui-icon" style="font-size:25px">&#xe67d;</i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));
        $(function (){
            $.ajax({
                url: 'http://localhost:8081/back/echarts/one',//地址：访问后台的地址
                data: {},//前端传递给后台的数据
                type: 'get',
                async: false,
                dataType: 'json',//是后端传递到前端的数据格式
                xhrFields:{
                    withCredentials:true
                },
                success: function (data) {//后端给前端的一个反馈
                    console.log(data)
                    // 指定图表的配置项和数据
                    if(data.code===0){
                        let option = {
                            title: {
                                text: '折线图堆叠'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: data.data.typeData
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ['周一','周二','周三','周四','周五','周六','周日']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series:data.data.data
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }else{
                        alert("获取数据异常")
                    }
                }
            });
        })

        function exports(){
            $.ajax({
                url: 'http://localhost:8081/back/echartOne/excel',//地址：访问后台的地址
                data: {},//前端传递给后台的数据
                type: 'get',
                async: false,
                dataType: 'json',//是后端传递到前端的数据格式
                xhrFields: {
                    withCredentials: true
                },
                success: function (data) {//后端给前端的一个反馈
                     if(data.code === 1){
                         alert("导出失败")
                         return false
                     }
                     alert("导出成功")
                }
            })
        }

        layui.use(['upload', 'element', 'layer'], function(){
            let $ = layui.jquery
                ,upload = layui.upload
                ,element = layui.element
                ,layer = layui.layer;
            //ajax全局参数设置 OK
            $.ajaxSetup({
                xhrFields: {
                    withCredentials: true
                }
            });
            upload.render({
                elem: '#excelUpload'
                ,url: 'http://localhost:8081/back/echartOne/excelUpload' //此处配置你自己的上传接口即可
                ,accept: 'file' //普通文件
                ,done: function(res){
                    if(res.code === 0){
                        layer.msg('上传成功');
                        window.location.reload();
                    }
                    console.log(res);
                }
            });
        })
    </script>
    </body>
</html>